<template>
	<view>
		<page-head headTitle="导游认证" :returnButton="true" @clickLeftReturn="clickLeftReturn"></page-head>
		<form>
			<view class="bg-white m-t9">
				<view class="m-l-r flex height align-center border-botton">
					<text class="text fs-3 width-1 letter-s">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</text>
					<view><input v-model="name" type="text" class="fs-3" placeholder-class="fs-3 placeholder" placeholder="请输入真实姓名"></view>
				</view>
				<view class="m-l-r flex height align-center border-botton">
					<text class="text fs-3 width-1 letter-s">身份证号</text>
					<view><input v-model="idCard" type="text" maxlength="18" class="fs-3" placeholder-class="fs-3 placeholder" placeholder="请输入身份证号码"></view>
				</view>
				<view class="m-l-r flex height align-center">
					<text class="text fs-3 width-1 letter-s">导游证号</text>
					<view><input v-model="certificateNo" class="fs-3" type="text" maxlength="13" placeholder-class="fs-3 placeholder" placeholder="请输入导游证号码"></view>
				</view>
			</view>
			<upload-image :image="image" @changeImg="changeImg"></upload-image>
			<span v-if="isAuth==0 && isFail" style="padding-left: 2em;color: #ffa414;margin-bottom: 1em;">*认证失败：{{remark}}</span>
			<!-- <prompt-language content="*认证失败：{remark}"></prompt-language> -->
			<bright-button v-if="isAuth==-1" title="申请认证" @licekSubmit="submitAuth"></bright-button>
			<grey-button v-else-if="isAuth==0 && !isFail" title="认证中"></grey-button>
			<bright-button v-if="isAuth==0 && isFail" title="再次认证" @licekSubmit="submitAuth"></bright-button>
			<grey-button v-else-if="isAuth==1" title="已认证"></grey-button>
		</form>
	</view>
</template>

<script>	
import pageHead from '@/components/common/page-head.vue'
import uploadImage from '@/components/common/upload-image.vue'
import brightButton from '@/components/common/bright-button.vue'
import greyButton from '@/components/common/grey-button.vue'
import promptLanguage from '@/components/common/prompt-language.vue'
	export default {
		components:{
			pageHead,
			uploadImage,
			promptLanguage,
			brightButton,
			greyButton
			
		},
		data() {
			return {
				image:'/static/images/guide-attestation.png',
				name:'',
				idCard:'',
				certificateNo:'',
				certificateImg:'',
				isAuth:-1,
				isFail:0,
				remark:''
			}
		},
		onLoad() {
			this.getStatus();
		},
		methods: {
			clickLeftReturn(){
				const pages = getCurrentPages() ;
				if(pages.length >1) {
					uni.navigateBack({
						delta: 1
					});
				}else{
					//返回上一页失败后强制回到首页
					uni.redirectTo({
						url: '../index/index'
					})
				}
			},
			//判断是否已认证
			getStatus(){
				this.$myRequest({
					method:'POST',
					url:'/api/guide/authinfo'
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						let data = res.data.data;
						this.image = data.info.ydy_authentication_imgs || '/static/images/guide-attestation.png';
						this.name = data.info.name;
						this.idCard = data.info.id_card_no;
						this.certificateNo = data.info.ydy_guide_no;
						this.certificateImg = data.info.ydy_authentication_imgs;
						this.isAuth = data.is_auth;
						this.isFail = data.is_fail;
						this.remark = data.info.remark;
						console.log(data);
					}
					
				})
			},
			//图片压缩上传
			changeImg(){
				var Token = uni.getStorageSync('token');
				// var Token = 'c28ab1e8cd3688fa399305310c793a0d8a276bf2387b7bda95167636a5759813';
				console.log(Token);
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有  compressed为压缩，只对jpg生效，效果不理想
					sourceType:['album', 'camera'],
				    success:(res)=> {
						//获取图片路径
						this.image = res.tempFilePaths[0];
						// console.log(res.tempFilePaths[0]);
						uni.getImageInfo({
							src:res.tempFilePaths[0],
							success:function(image){
								console.log("图片宽度：",image.width);
								console.log("图片高度：",image.height); 
								let canvasWidth = image.width;
								let canvasHeight = image.height;
								let base  = (canvasWidth/canvasHeight);
								if(canvasWidth > 400){
									canvasWidth = 400;
									canvasHeight = Math.floor(canvasWidth/base)
								}
								let img = document.createElement('img');
								img.src = res.tempFilePaths[0];
								let canvas = document.createElement('canvas');
								let ctx = canvas.getContext('2d');
								canvas.width = canvasWidth;
								canvas.height = canvasHeight;
								ctx.drawImage(img,0,0,canvasWidth,canvasHeight);
								canvas.toBlob(function(fileSrc){
									let imgSrc = window.URL.createObjectURL(fileSrc);
									imgSrc = canvas.toDataURL('image/png');
									console.log('路径', imgSrc);
									// res.tempFilePaths && self.photoOptions.success(imgSrc);
									//图片上传
									uni.uploadFile({
										url:'http://wx.hidaoyou.com/api/file/upload',
										filePath: imgSrc,//压缩后的图片路径
										name: 'file',
										formData: {
											'type': 'avatar'	
										},
										
										header: {
											'XX-Api-Version':'1.0',
											'XX-Device-Type':'wxapp',
											'XX-Token': Token
										},
									    success: (uploadFileRes) => {
											let data = JSON.parse(uploadFileRes.data);
											if(data.code == 1){
												this.image = data.data.url;
												console.log(this.image);
												uni.showToast({
													title:'上传成功',
													duration:2000
												})
											}else{
												uni.showToast({
													title:'上传失败',
													duration:2000
												})
											}
										}
									});
								})
							},fail(err) {
								console.log('读取图片失败',err)
							}
						})
						// uni.showLoading({
						// 	mask:true,
						// 	title:"上传中......"
						// });
						// //压缩图片
						// console.log('压缩前的体积', res.tempFilePaths[0].width);
						
						// zip.compressImage({
						// 	src:imagePath,
						// 	dst:imagePath,
						// 	overwrite:true,
						// 	quality:20,
						// 	width:'auto',
						// 	height:'auto'
						// },(result)=>{
						// 	//图片上传
						// 	uni.uploadFile({
						// 		url:'http://wx.hidaoyou.com/api/file/upload',
						// 		filePath: result.target,//压缩后的图片路径
						// 		name: 'file',
						// 		formData: {
						// 			'type': 'avatar'	
						// 		},
								
						// 		header: {
						// 			'XX-Api-Version':'1.0',
						// 			'XX-Device-Type':'wxapp',
						// 			'XX-Token': Token
						// 		},
						// 	    success: (uploadFileRes) => {
						// 			let data = JSON.parse(uploadFileRes.data);
						// 			if(data.code == 1){
						// 				this.image = data.data.url;
						// 				console.log(this.image);
						// 				uni.hideLoading();
						// 				uni.showToast({
						// 					title:'上传成功',
						// 					duration:2000
						// 				})
						// 			}else{
						// 				uni.showToast({
						// 					title:'上传失败',
						// 					duration:2000
						// 				})
						// 			}
						// 		}
						// 	});	
						// })
				    }
				});
			},
			 //提交认证
			submitAuth(){
				if(this.name == ''){
					uni.showToast({
						title:'名字不能为空',
						icon:'none',
						duration:2000
					});
					return false;
				}
				this.$myRequest({
					method:'POST',
					url:'/api/guide/submitauth',
					data:{
						name:this.name,
						id_card_no:this.idCard,
						certificate_no:this.certificateNo,
						certificate_img:this.image || ''
					}
				}).then(res=>{
					console.log(res);
					if(res.data.code == 1){
						uni.showToast({
							title:'提交成功',
							duration:2000
						})
						uni.reLaunch({
							url: '../../user/index/index'
						})
					}else{
						uni.showToast({
							title:'提交失败',
							duration:2000
						})
					}
				})
			}
		}
	}
</script>

<style>

</style>
